<template>
  <div>
    <el-row class="top" v-show="isRow">
      <el-col :span="6" style="margin-top: 10px;margin-left: 10px">
        <router-link :to="{path:'/addlog'}">
          <el-button type="primary" icon="el-icon-circle-plus">新建日报</el-button>
        </router-link>
      </el-col>
      <el-col :span="14">
        <span style="color: #667B8F">搜索员工：</span>
        <el-select v-model="userName" filterable remote @change="changeEmp"
                   placeholder="--请选择--" class="select">
          <el-option
            v-for="e in empList"
            :key="e.employeesId"
            :label="e.empName"
            :value="e.employeesId">
          </el-option>
        </el-select>
        <span style="color: #D6CCCF"> &nbsp;&nbsp;  | &nbsp;&nbsp;</span>
        <span style="color: #667B8F">类型：</span>
        <el-select v-model="logType" filterable placeholder="全部" @change="changeState" class="selected">
          <el-option
            v-for="item in logs"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span style="color: #D6CCCF"> &nbsp;&nbsp;  | &nbsp;&nbsp;</span>
        <el-input v-model="title" @change="searchPage" placeholder="请输入标题" suffix-icon="el-icon-search" style="width: 220px"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button icon="el-icon-refresh" style="margin-top: 10px" @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <!-- 批量操作 -->
    <div class="operate" v-show="isShow">
      <div class="selected—title">
        已选中<span class="selected—count">{{count}}</span>项
      </div>
      <div class="selected—title1" v-show="isOne">
        <span @click="updateLog()"><i class="el-icon-edit"></i>修改</span>
      </div>
      <div class="selected—title2">
        <span @click="deleteLog()"><i class="el-icon-delete"></i>删除</span>
      </div>
    </div>
    <div class="tab">
      <el-table ref="multipleTable" @selection-change="selectionChange"
                :data="tableData" :default-sort = "{prop: 'culTime', order: 'descending'}" style="width: 100%" height="420">
        <el-table-column prop="culId" fixed type="selection" width="55"></el-table-column>
        <el-table-column  prop="culTitle" fixed label="标题">
          <template slot-scope="r">
            <span class="information-title" @click="drawerUpdate(r.row.culId)" style="color:#2898E0;cursor:pointer">{{r.row.culTitle}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="empByEmployeesId.empName" fixed label="作者" width="120"></el-table-column>
        <el-table-column prop="culName" label="类型" width="120">
          <template slot-scope="c">
            {{c.row.culName | formatState}}
          </template>
        </el-table-column>
        <el-table-column prop="culOutline" label="概要" width="310">
          <template slot-scope="e">
            <span class="information-title">{{e.row.culOutline}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="culStatus" label="点评状态" width="120">
          <template slot-scope="b">
            <el-tag class="status" :type="b.row.culStatus === '未点评' ? 'danger' : 'success'">{{b.row.culStatus}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="culTime" sortable label="创建时间" width="180">
          <template slot-scope="s">
            {{s.row.culTime | formatDate}}
          </template>
        </el-table-column>
      </el-table>
      <!-- 抽屉 -->
      <el-drawer
        :visible.sync="drawer"
        :with-header="false"
        size="50%">
        <div class="drawers">
          <el-scrollbar style="height: 100%">
            <el-form :model="culog">
              <el-row style="margin-top: 20px;font-size:12px;color:#888888">
                <el-col :span="10">
                  <i class="el-icon-timer"></i>
                  <span>{{culog.culTime | formatDates}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" class="title">
                  <span>{{culog.culTitle}}</span>
                  <span>-</span>
                  <span>{{culog.culName | formatState}}</span>
                </el-col>
              </el-row>
              <el-row style="margin-top: 20px">
                <el-col :span="22">
                  <span style="font-size: 16px;color: #676A6C;">{{culog.culOutline}}</span>
                </el-col>
              </el-row>
            </el-form>
            <el-tabs v-model="activeName" type="card" style="margin-top: 20px">
              <el-tab-pane label="评论" name="first">
                <el-row>
                  <el-col :span="23">
                    <el-input type="textarea" @input="changeValue"
                              v-model="content" :rows="3" placeholder="添加回复..."></el-input>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                  <el-col :span="2" style="cursor: pointer">
                    <img @click="expression = !expression" src="../imgs/400.png">
                  </el-col>
                  <el-col :span="2" :push="18">
                    <el-button type="primary" plain v-show="publishShow" @click="addReply">发表</el-button>
                  </el-col>
                </el-row>
                <!-- 表情选择框 -->
                <emotion v-show="expression" @emotion="handleEmotion" :height="200" ></emotion>
                <div class="replyOne">
                  <div v-for="emp in replyList" class="reply">
                    <el-row style="margin-bottom: 10px">
                      <el-col :span="2">
                        <img :src="emp.empByEmployeesId.empImgpath"
                             v-if="emp.empByEmployeesId.empImgpath.startsWith('http')"
                             class="img-circle"/>
                        <img :src="'http://localhost:8088/'+emp.empByEmployeesId.empImgpath"
                             v-if="!emp.empByEmployeesId.empImgpath.startsWith('http')"
                             class="img-circle"/>
                      </el-col>
                      <el-col :span="21">
                        {{emp.empByEmployeesId.empName+"："}}
                        <span v-html="emp.replContent.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)"></span>
                      </el-col>
                    </el-row>
                    <el-row style="margin-left: 46px">
                      <el-col :span="8">
                        {{emp.replDate | formatData}}
                      </el-col>
                      <el-col :span="3" :push="12">
                        <div class="continer">
                          <span style="cursor:pointer" @click="deleteByReplId(emp.replId,emp.culogByCulId.culId)">删除</span>
                          <span>|</span>
                          <span style="cursor:pointer" @click="isTrueReply(emp.replId,emp.empByEmployeesId.empName)">回复</span>
                        </div>
                      </el-col>
                    </el-row>
                    <hr class="hrts"/>
                    <div v-for="emps in replyListTwo" class="replys">
                      <div v-if="emp.replId == emps.replIds">
                        <el-row>
                          <el-col :span="2">
                            <img :src="emps.empByEmployeesId.empImgpath"
                                 v-if="emps.empByEmployeesId.empImgpath.startsWith('http')"
                                 class="img-circle"/>
                            <img :src="'http://localhost:8088/'+emps.empByEmployeesId.empImgpath"
                                 v-if="!emps.empByEmployeesId.empImgpath.startsWith('http')"
                                 class="img-circle"/>
                          </el-col>
                          <el-col :span="21">
                            <span>{{emps.empByEmployeesId.empName+"："}}</span>
                            <span v-html="emps.replContent.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)"></span>
                          </el-col>
                        </el-row>
                        <el-row style="margin-top: 10px;margin-left: 46px">
                          <el-col :span="8">
                            {{emps.replDate | formatData}}
                          </el-col>
                          <el-col :span="3" :push="13">
                            <div class="continers">
                              <span style="cursor:pointer" @click="deleteByReplId(emps.replId,emps.culogByCulId.culId)">删除</span>
                            </div>
                          </el-col>
                        </el-row>
                        <hr class="hrte"/>
                      </div>
                    </div>
                    <div :id="'rp'+emp.replId" style="margin-left: 50px;display: none">
                      <el-row>
                        <el-col :span="2">
                          <img :src="empImgpath"
                               v-if="empImgpath.startsWith('http')"
                               class="img-circle"/>
                          <img :src="'http://localhost:8088/'+empImgpath"
                               v-if="!empImgpath.startsWith('http')"
                               class="img-circle"/>
                        </el-col>
                        <el-col :span="21">
                          <el-input type="textarea" v-model="contents" :rows="3"></el-input>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="2" :push="20">
                          <el-button style="margin-top: 10px" type="primary" plain @click="addReplyTwo(emp.replId,emp.empByEmployeesId.employeesId,emp.culogByCulId.culId)">发表</el-button>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="附件" name="second">暂无数据</el-tab-pane>
            </el-tabs>
          </el-scrollbar>
        </div>
      </el-drawer>
      <!-- 分页 -->
      <div class="limit">
        <el-pagination
          :current-page.sync="currPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @current-change="changePage"
          @size-change="sizeChange">
        </el-pagination>
        <p></p>
      </div>
    </div>
  </div>
</template>

<script>
  import Emotion from '@/components/Emotion/index'
  export default {
    name: 'AsLog',
    components: {
      Emotion
    },
    data: function () {
      return {
        tableData: [],
        culog: {
          culId: '',
          culTitle: '',
          culOutline: '',
          culStatus: '',
          culTime: '',
          culName: '',
          culDelete: ''
        },
        user: {},       //当前登录用户信息
        empId: '',      //当前登录用户
        deptId: '',       //记录部门id
        empImgpath: '', //当前登录用户图片
        content: '',    //回复内容
        empList: [],   //员工列表
        multipleTable: [],//存放选中值的数组
        deleteList: [], //批量删除的ID
        replyList: [],  //回复列表
        replyListTwo: [],//二级回复列表
        userName: '',  //搜索员工的下拉框
        logType: '',   //报类型下拉框
        title: '',     //按标题查询
        colors: '',    //点评状态颜色
        isRow: true,   //最上层一栏显隐
        isShow: false, //批量操作显隐
        isOne: false,  //修改显隐
        drawer: false, //抽屉
        activeName: '',//标签页
        isReply: false, //二级回复显隐
        contents: '',   //二级回复内容
        publishShow: false,//发表按钮显隐
        expression: false, //表情包显隐
        //分页
        currPage: 1,     //当前页
        totalSize: 0,    //总条数
        pageSize: 5,     //页大小
        logs: [{
          value: '1',
          label: '日报'
        }, {
          value: '2',
          label: '周报'
        }, {
          value: '3',
          label: '月报'
        }]
      }
    },
    created:function(){
      this.user = JSON.parse(sessionStorage.getItem('user'));
      this.empImgpath = this.user.empImgpath;
      this.empId = this.user.employeesId;
      this.authentication();//验证用户身份

      this.$axios.get("http://localhost:8088/ser/check-emp"
      ).then(v=>{//员工
        this.empList = v.data;
      }).catch(v=>{
        alert("访问失败!"+v.data);
      })
    },
    methods: {
      //验证用户身份
      authentication() {
        var id = JSON.parse(sessionStorage.getItem('user')).employeesId;//用户id
        //获取用户是否是一级角色
        this.$axios.get("http://localhost:8088/is_one_Role",
          {
            params: {
              empId: id
            }
          }).then(v => {
          this.deptId = v.data.deptId;//记录部门id
          if (v.data.postLevel == 1) {//用户是一级角色
            //查询出能看到的部门信息
            if (v.data.deptId == 1) {
              this.empId = null;
              this.deptId = null;
              this.initData(null, null, this.logType, this.title, this.currPage, this.pageSize);
            }else{
              this.empId = null;
              this.initData(null, this.deptId, this.logType, this.title, this.currPage, this.pageSize);
            }
          }else{//用户是普通角色
            this.initData(id, this.deptId, this.logType, this.title, this.currPage, this.pageSize);
          }
        }).catch(v => {
          alert("访问失败!" + v.data);
        })
      },
      initData(userName, fatherDeptId, logType, title, currPage, pageSize) {
        this.$axios.get("http://localhost:8088/log/clog-page",
          {
            params: {
              userName: userName,
              fatherDeptId: fatherDeptId,
              logType: logType,
              title :title,
              currPage: currPage,
              pageSize: pageSize
            }
          }
        ).then(v => {
          this.tableData = v.data.rows;
          this.totalSize = v.data.total;
        }).catch(v => {
          alert("访问失败!" + v.data);
        })
      },
      changePage(currPage) {
        this.initData(this.userName, this.deptId, this.logType, this.title, currPage, this.pageSize);
      },
      changeEmp() {
        this.initData(this.userName, this.deptId, this.logType, this.title, this.currPage, this.pageSize);
      },
      changeState() {
        this.initData(this.userName, this.deptId, this.logType, this.title, this.currPage, this.pageSize);
      },
      searchPage() {
        this.initData(this.userName, this.deptId, this.logType, this.title, this.currPage, this.pageSize);
      },
      sizeChange (pageSize) { //改变页大小
        this.pageSize = pageSize;
        this.initData(this.userName, this.deptId, this.logType, this.title, 1, this.pageSize);
      },
      reset(){//重置
        this.userName = '';
        this.logType = '';
        this.title = '';
        this.initData(this.userName, this.deptId, this.logType, this.title, this.currPage, this.pageSize);
      },
      selectionChange(val) {//复选框选中的
        this.multipleTable = val;    //选中的值
        if(this.multipleTable.length > 0){
          this.isRow = false;   //第一行隐藏
          this.isShow = true;   //批量操作栏出现
        }
        //选中项大于1不能执行添加跟进记录和修改按钮
        if(this.multipleTable.length > 1){
          this.isOne = false;
        }else if(this.multipleTable.length == 0){//选中项为0时
          this.isRow = true;    //第一行出现
          this.isShow = false;  //批量操作栏隐藏
        }else{
          this.isOne = true;//修改出现
        }
        console.log(val);
      },
      updateLog(){//修改
        console.log(this.multipleTable[0].culId);
        var culId = this.multipleTable[0].culId;
        this.$router.push({
          path:'/addlog',
          query:{
            culId:culId
          }
        })
      },
      deleteLog(){//批量删除
        this.$confirm('此操作将永久删除该日志, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var deleteId = JSON.stringify({deleteList:this.multipleTable});
          this.$axios.post("http://localhost:8088/log/delete-log",
            this.qs.stringify({deleteId})
          ).then(()=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //刷新数据
            this.initData(this.empId, this.deptId, this.logType, this.title, this.currPage, this.pageSize);
          }).catch();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      drawerUpdate(culId){//抽屉功能
        this.$axios.get("http://localhost:8088/log/check-log",
          {params:{culId:culId}}
        ).then(v=>{
          this.culog = v.data;
          this.drawer = true;
          this.activeName = 'first';
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })

        this.$axios.get("http://localhost:8088/rep/check-reply",
          {params:{culId:culId}}
        ).then(v=>{//回显回复表
          this.replyList = v.data;
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })

        this.$axios.get("http://localhost:8088/rep/check-replys",
          {params:{culId:culId}}
        ).then(v=>{//回显二级回复
          this.replyListTwo = v.data;
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })

        this.content = '';
        this.publishShow = false;
      },
      changeValue(){
        if(this.content != '' && this.content != undefined){
          this.publishShow = true;
        }
      },
      isTrueReply(id,empName){//二级回复框显隐
        console.log("回复id："+id);
        var a = document.getElementById("rp"+id);
        if(a.style.display == "none"){
          a.style.display = "block";
        }else{
          a.style.display = "none";
        }
        this.contents = "回复@"+empName+"：";
        console.log("id值:"+a);
        //this.expression = true;
      },
      addReply(){//新增回复表
        var culIds = this.culog.culId;
        if(this.content != '' && this.content != undefined){
          this.$axios.get("http://localhost:8088/rep/save-reply",
            {params:{empId:this.empId, content:this.content, culId:culIds}}
          ).then(v=>{
            this.content = '';
            this.drawerUpdate(culIds);
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        }else{
          this.$message.error("回复内容不能为空！");
        }
      },
      deleteByReplId(replId,culId){//回复表删除
        this.$axios.get("http://localhost:8088/rep/delete-reply",
          {params:{replId:replId}}
        ).then(v=>{
          this.drawerUpdate(culId);
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })
      },
      addReplyTwo(replId,employeesId,culId){//二级回复
        if(this.contents != '' && this.contents != undefined){
          this.$axios.post("http://localhost:8088/rep/save-replys", {
            empId:this.empId,
            replIds:replId,
            employeesId:employeesId,
            culId:culId,
            contents:this.contents
          }).then(v=>{
            this.contents = '';
            this.isReply = false;
            this.drawerUpdate(culId);
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        }else{
          this.$message.error("回复内容不能为空！");
        }
      },
      handleEmotion (i) {//选择表情
        this.content += i;
      },
      emotion (res) {//将匹配结果替换表情图片
        let word = res.replace(/\#|\;/gi,'');
        const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞',
          '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶',
          '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼',
          '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗',
          '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见',
          '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠',
          '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀',
          '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰',
          '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀',
          '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强',
          '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你',
          'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈',
          '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极',
          '右太极'];
        let index = list.indexOf(word);
        return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`;
      }
    },
    computed:{
      count(){
        return this.multipleTable.length
      }
    },
    filters: {
      formatState(refus){
        if(refus != null && refus != ''){
          if(refus == 1){
            return "日报"
          }
          if(refus == 2){
            return "周报"
          }
          if(refus == 3){
            return "月报"
          }
        }
      },
      formatDate(time){
        let date   = new Date(time)//把定义的时间赋值进来进行下面的转换
        let year   = date.getFullYear();
        let month  = date.getMonth()+1;
        let day    = date.getDate();
        let hour   = date.getHours();
        let minute = date.getMinutes();
        let second = date.getSeconds();
        return year+"-"+month+"-"+day;
        /*return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;*/
      },
      formatData(time){
        let date   = new Date(time)//把定义的时间赋值进来进行下面的转换
        let year   = date.getFullYear();
        let month  = date.getMonth()+1;
        let day    = date.getDate();
        let hour   = date.getHours();
        let minute = date.getMinutes();
        let second = date.getSeconds();
        return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
      },
      formatDates(time){
        let date   = new Date(time)//把定义的时间赋值进来进行下面的转换
        let year   = date.getFullYear();
        let month  = date.getMonth()+1;
        let day    = date.getDate();
        let hour   = date.getHours();
        let minute = date.getMinutes();
        let second = date.getSeconds();
        let dateT = time ? new Date(time) : new Date();
        let week = dateT.getDay();
        let weeks = "";
        if(week == 1){
          weeks = "一";
        }
        if(week == 2){
          weeks = "一";
        }
        if(week == 3){
          weeks = "二";
        }
        if(week == 4){
          weeks = "四";
        }
        if(week == 5){
          weeks = "五";
        }
        if(week == 6){
          weeks = "六";
        }
        if(week == 7){
          weeks = "七";
        }
        return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second+" 星期"+weeks;
      }
    }
  }
</script>

<style scoped>
  .top{
    border: 1px solid #D3DCE6;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    background: white;
  }
  a:active{
    color: #333333;
  }
  .select{
    padding-top:10px;
    width: 110px;
  }
  .selected{
    width: 100px;
  }
  .operate{
    font-size: 14px;
    height: 60px;
    padding: 0 20px;
    color: #777;
    margin-bottom: 10px;
    border: 1px solid #e6e6e6;
    background: white;
  }

  .selected—title{
    margin-top: 22px;
    margin-left: -6px;
    border-right: 1px solid #e6e6e6;
    width: 86px;
    height:20px;
    float: left;
  }
  .selected—title1{
    margin-top: 22px;
    border-right: 1px solid #e6e6e6;
    width: 86px;
    height:20px;
    float: left;
    cursor: pointer;
  }
  .selected—title2{
    margin-top: 22px;
    width: 86px;
    height:20px;
    float: left;
    cursor: pointer;
  }
  .tab{
    border: 1px solid #D3DCE6;
    padding-bottom: 15px;
    background: white;
    width: 100%;
    overflow: hidden;
  }
  .limit{
    margin-top:10px;
    margin-left:340px;
  }
  .status{
    border-radius: 10px;
    width: 60px;
    height: 30px;
  }
  .information-title {
    width: 300px;   /*一定要设置宽度，或者元素内含的百分比*/
    overflow:hidden; /*溢出的部分隐藏*/
    white-space: nowrap; /*文本不换行*/
    text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
  }
  .drawers{
    margin-left: 40px;
    height: 580px;
  }
  .title{
    font-size: 30px;
    color: #676A6C;
    font-weight: 100;
    margin-top: 20px;
    color: #676A6C;
  }
  .replyOne{
    font-size: 13px;
    color: #676A6C;
    margin-top: 20px;
    border: 1px solid #F9F9F9;
    width: 556px;
    background-color: #F9F9F9;
  }
  .reply{
    margin-top: 10px;
    margin-left: 10px;
  }
  .hrts{
    width: 540px;
    border-top: 0px solid #EEEEEE;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .hrte{
    width: 490px;
    border-top: 0px solid #EEEEEE;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .img-circle {
    border-radius: 50%;
    margin-right: 10px;
    width: 28px;
    height: 28px;
  }
  .continer{
    height:5px;
    width:80px;
    color: blue;
    display:none;
  }
  .reply:hover .continer{
    display:block;
  }
  .replys{
    margin-left: 50px
  }
  .continers{
    height:5px;
    width:80px;
    color: blue;
    display:none;
  }
  .replys:hover .continers{
    display:block;
  }
</style>
